<template>
  <div style="text-align: right" class="bottom-Btn">
    <template v-if="showAll">
    <el-button class="el-button--default" v-for="(it, index) in btns" :key="index" size="middle" type="primary" :loading="it.loading" :disabled="it.disabled"
               @click="triggerEvent(it, index)" :class="it.buttonName == 'back'?'backButton':''">{{ it.description }}
    </el-button>
    </template>
    <el-button size="middle" @click="cancel">取 消</el-button>
  </div>
</template>

<script>
  import {getNextUsers} from '@/api/wf/workflow'
  import button from '@/api/wf/button'

  export default {
    name: 'PopBtn',
    props: {
      showAll: {
        type: Boolean,
        default: true
      },
      businessId: {
        type: String,
        default: ''
      },
      procDefKey: {
        type: String,
        default: ''
      },
      readonly: {
        type: Boolean,
        default: false
      },
      taskId: { // 非必须的， 专门为admin区分不同的任务
        type: String,
        default: ''
      }
    },
    data() {
      return {
        btns: []
      }
    },
    mounted() {
      // if (!this.readonly) {
      //   this.getBtnList()
      // }
    },
    methods: {
      getBtnList() {
        const params = {
          businessId: this.businessId,
          procDefKey: this.procDefKey,
          taskId: this.taskId // 非必须的， 专门为admin区分不同的任务
        }
        button.listBtn(params).then(res => {
          this.btns = res.data
        })
      },
      getBtnListWithParam(params) {
        button.listBtn(params).then(res => {
          this.btns = res.data
          this.btns.forEach((item,index)=>{
            if(item.buttonName == 'audit'&&item.description == '审批'){
              item.description = '通过'
            }
          })
          console.log(this.btns,'dddddddddddddd')
        })
      },
      triggerEvent(it, index) {
        if(it.buttonName == 'back'){
          this.$confirm('确认退回流程?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const jsonParams = it.params
            let params;
            try {
              if (jsonParams) {
                params = JSON.parse(jsonParams)
              }
            } catch (e) {
            }
            this.$emit(it.event, params)
          }).catch(() => {
          });
        }else{
          this.btns = this.btns.map((b, i) => {
            if (i === index) {
              return { ...b, loading: true };
            } else {
              return { ...b, disabled: true };
            }
          });
          const jsonParams = it.params
          let params;
          try {
            if (jsonParams) {
              params = JSON.parse(jsonParams)
            }
          } catch (e) {
          }
          this.$emit(it.event, params, () => {
            this.btns = this.btns.map((b, i) => {
              if (i === index) {
                return { ...b, loading: false };
              } else {
                return { ...b, disabled: false };
              }
            });
          })
        }
      },
      resetLoading(){
        this.btns = this.btns.map((b, i) => {
            return { ...b, loading: false,disabled: false };
        });
      },
      cancel() {
        this.$emit('cancel')
      }
    }
  }
</script>

<style scoped lang="scss">
.bottom-Btn{
  .el-button{
    padding: 9px 20px!important;
  }
}
  .backButton{
    background-color: rgb(0, 199, 151);
    color: #fff;
    border-color: rgb(0, 199, 151);
  }
  .backButton:hover{
    background:  rgba(0, 199, 151,0.8);
    border-color: rgb(0, 199, 151);
    color: #FFF;
  }
</style>
